<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <!-- 引入首页的css样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入媒体查询css样式 -->
    <link rel="stylesheet" href="css/media.css">
    <!-- 引入首页的js样式 -->
    <script src="js/index.js"></script>
    <!-- 引入swiper的css样式 -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- 引入swipper的js样式 -->
    <script src="js/swiper.min.js"></script>
</head>
<body>
    <!-- 导航部分 -->
    <header>
        <section class="header_logo">
            <img src="images/logo.png" alt="">
        </section>
        <section class="header_hea">
            <div class="header_nav">小米官网</div>
            <div class="header_nav">小米商城</div>
            <div class="header_nav">小米影像</div>
            <div class="header_nav">MIUI</div>
            <div class="header_nav">loT</div>
            <div class="header_nav">云服务</div>
            <div class="header_nav">天星数科</div>
            <div class="header_nav">有品</div>
            <div class="header_nav">小爱开放平台</div>
            <div class="header_nav">企业团购</div>
        </section>
        <section class="header_login">
            <a href="script:;">登录</a>
            <a href="script:;">|</a>
            <a href="script:;">注册</a>
        </section>
        <!-- 1200px 以下 显示 -->
        <section class="header_r">
            <a href="script:;"><img src="icons/user.png" alt=""></a>
            <a href="script:;"><img src="icons/menu.png" alt=""></a>
        </section>
    </header>
    <!-- xiaomi 13系列 -->
    <div class="xmthirteen" id="tp">
        <img src="images/img_1.jpeg" alt="" class="xmthirteen_1200">
        <!-- 750px 以下 显示 -->
        <img src="images/img_1_750.jpeg" alt="" class="xmthirteen_750">
    </div>
     <!-- 回到顶部 -->
     <div class="top">
        <a href="#tp">
            <img src="images/top-icon.png" alt="">
        </a>
    </div>
    <!-- banner轮播 -->
    <div class="banner" >
        <div class="swiper mySwiper mySwiper1">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                  <img src="images/banner_1.jpg" alt="" class="banner_maximg">
                    <!-- 750 显示 -->
                  <img src="images/banner_1_750.jpg" alt="" class="banner_minimg">
                </div>
              <div class="swiper-slide">
                  <img src="images/banner_2.jpg" alt="" class="banner_maximg">
                    <!-- 750 显示 -->
                  <img src="images/banner_2_750.jpg" alt="" class="banner_minimg">
              </div>
            </div>
            <div class="swiper-button-next banner_left" style="color: #fff; font-weight: bold;"></div>
            <div class="swiper-button-prev banner_right" style="color: #fff; font-weight: bold;"></div>
            <div class="swiper-pagination" style="color: #fff;"></div>
          </div>
    </div>
    <!-- Redmi k60  -->
    <div class="redmi">
        <img src="images/Redmi_k60.jpeg" alt="" class="redmi_pc">
        <!-- 750 显示 -->
        <img src="images/Redmi_750.jpeg" alt="" class="redmi_app">
    </div>
    <!--MIUI 14 锐意新生 -->
    <div class="live">
        <img src="images/live.jpeg" alt="" class="live_pc">
        <!-- 750 显示 -->
        <img src="images/live_750.jpeg" alt="" class="live_app">
    </div>
    <!-- 一束光 -->
    <div class="light">
        <img src="images/guang.jpg" alt="" class="light_pc">
        <!-- 750 显示 -->
        <img src="images/guang_750.jpg" alt="" class="light_app">
        <section class="light_play"></section>
        <section class="light_mp4">
            <span>X</span>
            <video src="mp4/MIUI.mp4" controls></video>
        </section>
    </div>
    <!-- 美好时刻 -->
    <div class="host">
        <div class="swiper mySwiper mySwiper2">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                    <img src="images/host.jpg" alt="" class="host_pc">
                    <img src="images/host_750.jpg" alt="" class="host_app">
                </div>
              <div class="swiper-slide">
                  <img src="images/host_2.jpg" alt="" class="host_pc">
                  <img src="images/host2_750.jpg" alt="" class="host_app">
                </div>
              <div class="swiper-slide">
                  <img src="images/host_3.jpg" alt="" class="host_pc">
                  <img src="images/host3_750.jpg" alt="" class="host_app">
                </div>
              <div class="swiper-slide">
                  <img src="images/host_4.jpg" alt="" class="host_pc">
                  <img src="images/host4_750.jpg" alt="" class="host_app">
                </div>
              <div class="swiper-slide">
                  <img src="images/host_5.jpg" alt="" class="host_pc">
                  <img src="images/host5_750.jpg" alt="" class="host_app">
                </div>
            </div>
            <div class="swiper-button-next banner_left" style="color: #fff; font-weight: bold;"></div>
            <div class="swiper-button-prev banner_right" style="color: #fff; font-weight: bold;"></div>
            <div class="swiper-pagination quan"></div>
          </div>
    </div>
    <!-- 2022年度瞬间揭晓 -->
    <div class="reveal">
        <img src="images/2022.jpg" alt="" class="reveal_pc">
        <img src="images/2022_app.jpg" alt="" class="reveal_app">
    </div>
    <!-- cyberone -->
    <div class="cyberone">
        <img src="images/2022_2.jpg" alt="" class="cyberone_pc">
        <img src="images/2022_3.jpg" alt="" class="cyberone_pc">
        <img src="images/2022_app2.jpg" alt="" class="cyberone_app">
        <img src="images/2022_app3.jpg" alt="" class="cyberone_app">
    </div>
    <!-- 了解小米 手机iPai -->
    <footer class="more">
        <a href="script:;">了解小米</a>
    </footer>
</body>
</html>